<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            height: 300px;
            overflow: auto;
            width: 400px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="div" contenteditable="true">
        <p class="chat-msg-p">
            <span class="chat-msg-name">
                <span class="chat-titlename">章超胜问：</span>
                <span class="chat-eidt"></span>
            </span>
            <span class="chat-msg-text">
                <span>你</span>
                <span>叫</span>
                <span>什</span>
                <span>么</span>
                <span>名</span>
                <span>字</span>
                <span>？</span>
            </span>
        </p>
        <p class="chat-msg-p">
            <span class="chat-msg-name">
                <span class="chat-titlename">王杰答：</span>
                <span class="chat-eidt"></span>
            </span>
            <span class="chat-msg-text">
                <span>我叫王杰。</span>
            </span>
        </p>
        <p class="chat-msg-p">
            <span class="chat-msg-name">
                <span class="chat-titlename">章超胜问：</span>
                <span class="chat-eidt"></span>
            </span>
            <span class="chat-msg-text">
                <span>你今年多大了？</span>
            </span>
        </p>
        <p class="chat-msg-p">
            <span class="chat-msg-name">
                <span class="chat-titlename">王杰答：</span>
                <span class="chat-eidt"></span>
            </span>
            <span class="chat-msg-text">
                <span>我今年18岁。</span>
            </span>
        </p>
        <p class="chat-msg-p">
            <span class="chat-msg-name">
                <span class="chat-titlename">章超胜问：</span>
                <span class="chat-eidt"></span>
            </span>
            <span class="chat-msg-text">
                <span>你叫什么名字？</span>
            </span>
        </p>
        <p class="chat-msg-p">
            <span class="chat-msg-name">
                <span class="chat-titlename">王杰答：</span>
                <span class="chat-eidt"></span>
            </span>
            <span class="chat-msg-text">
                <span>我叫王杰。</span>
            </span>
        </p>
        <p class="chat-msg-p">
            <span class="chat-msg-name">
                <span class="chat-titlename">章超胜问：</span>
                <span class="chat-eidt"></span>
            </span>
            <span class="chat-msg-text">
                <span>你今年多大了？</span>
            </span>
        </p>
        <p class="chat-msg-p">
            <span class="chat-msg-name">
                <span class="chat-titlename">王杰答：</span>
                <span class="chat-eidt"></span>
            </span>
            <span class="chat-msg-text">
                <span style="background: red;">我今年18岁。</span>
            </span>
        </p>
    </div>
    <button id="btn">点击</button>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        document.getElementById('btn').onclick = function(){
            var selection = document.getSelection(); //.getRangeAt(0)
            console.log(selection.getRangeAt(0))
            console.log(getComputedStyle(selection.getRangeAt(0).startContainer.parentElement)['backgroundColor'])
            if( selection.getRangeAt(0).endContainer.parentElement == selection.getRangeAt(0).startContainer.parentElement ){
                if( /style="background: red;"/.test(selection.getRangeAt(0).endContainer.parentElement.outerHTML) ){
                    if(  selection.getRangeAt(0).endOffset -  selection.getRangeAt(0).startOffset == selection.getRangeAt(0).startContainer.length ){
                        console.log('Mark')
                    }else{
                        console.log('noMark')
                    }
                }else{
                    console.log('noMark')
                }
            }else{
                console.log('noMark')
            }
            var currentP = selection.getRangeAt(0).startContainer.parentElement.closest('p.chat-msg-p');
            if( selection.getRangeAt(0).startOffset != 0 ){
                let html = '<span class="chat-msg-text"><span>我今年1222222228岁。</span></span>';
                $(currentP).append(html);
            }else{
                let html = $('<p class="chat-msg-p">\
                    <span class="chat-msg-name">\
                        <span class="chat-titlename">王杰22222答：</span>\
                        <span class="chat-eidt"></span>\
                    </span>\
                    <span class="chat-msg-text">\
                        <span>我今年1222222228岁。</span>\
                    </span>\
                </p>');
                html.insertBefore(currentP)
            }
            console.log(getCursortPosition(document.getElementById('div')))
        }
        //获取当前光标位置
        const getCursortPosition = function (element) {
            var caretOffset = 0;
            var doc = element.ownerDocument || element.document;
            var win = doc.defaultView || doc.parentWindow;
            var sel;
            if (typeof win.getSelection != "undefined") {//谷歌、火狐
                sel = win.getSelection();
                if (sel.rangeCount > 0) {//选中的区域
                    var range = win.getSelection().getRangeAt(0);
                    var preCaretRange = range.cloneRange();//克隆一个选中区域
                    preCaretRange.selectNodeContents(element);//设置选中区域的节点内容为当前节点
                    preCaretRange.setEnd(range.endContainer, range.endOffset); //重置选中区域的结束位置
                    caretOffset = preCaretRange.toString().length;
                }
            } else if ((sel = doc.selection) && sel.type != "Control") {//IE
                var textRange = sel.createRange();
                var preCaretTextRange = doc.body.createTextRange();
                preCaretTextRange.moveToElementText(element);
                preCaretTextRange.setEndPoint("EndToEnd", textRange);
                caretOffset = preCaretTextRange.text.length;
            }
            return caretOffset;
        }
    </script>
</body>
</html>